<template>
  <div class="px-20 py-40 border-bottom">
    <p class="text-2xl font-bold bg-red-700" >{{ $t('common.welcome') }}</p>
    <svg-icon  iconClass="phone" className="text-xl mr-5" />
    <Form class="field">
      <Field
        type="tel"
        name="patternPhone"
        placeholder="请输入手机号"
        clearable
      >
      <!-- <template #slot="left-icon"> -->
        <!-- <svg-icon  icon-class="phone" className="text-xl mr-5" /> -->
      <!-- </template> -->
      </Field>
      <Field
        type="tel"
        placeholder="输入验证码"
        clearable
        :rules="[{ message: '请填写验证码' }]"
      >
        <svg-icon
          slot="left-icon"
          iconClass="shield"
          className="text-xl mr-5"
        />
        <template #button>
          <Button
            size="small"
            type="primary"
            >发送验证码</Button
          >
        </template>
      </Field>
      <div class="mt-20">
        <Button round block color="#FF923A" native-type="submit">登陆</Button>
      </div>
    </Form>
    <div class="fixed bottom-40 left-20 right-20">
      <!-- <img :src="img" alt="图片" /> -->
    </div>
  </div>
</template>

<!-- <script>
import { getSmsChannels, login, sendVerifCode } from '@/api/login'
import { checkPlatform } from '@/utils/helper'
import { setLocalStore } from '@/config/global'
import { Form, Field, Button } from "vant";
export default {
  name: 'Login',
  components: { Form, Field, Button },
  data() {
    return {
      phone: '',
      code: '',
      countDown: 60,
      lockSend: false, // 禁用验证码按钮
      patternPhone: /^8\d{8,19}$/,
      img: require('@/assets/user/afpi.png')
    }
  },
  // created() {
    // this.smsCount = 0
    // getSmsChannels().then(res => {
    //   this.smsChannels = res.smsChannels
    // })
  // },
  methods: {
    handleSendCode() {
      const index = this.smsCount % this.smsChannels.length
      const channel = this.smsChannels[index]
      const params = {
        mobilePhone: this.phone,
        event: 'default_verification',
        sender: channel
      }
      if (channel === 'nxsms') {
        this.$dialog.alert({
          message: '我们会以电话的形式告知您验证码，请注意接听',
          confirmButtonText: '知道了'
        })
      }
      this.smsCount += 1
      sendVerifCode(params).then(res => {
        this.startDown()
        this.verificationCode = res
      })
    },
    startDown() {
      this.lockSend = true
      this.forbidToRef = setInterval(() => {
        this.countDown = this.countDown - 1
        if (this.countDown == 0) {
          clearInterval(this.forbidToRef)
          this.lockSend = false
        }
      }, 1000)
    },
    handleLogin(values) {
      if (!this.code) {
        return
      }
      const phoneInfo = checkPlatform()
      const params = {
        mobilePhone: this.phone,
        verificationCode: this.code,
        sequenceId: this.verificationCode,
        deviceInfo: {
          platform: 'h5',
          appChannel: 'kredito',
          appSystemVersion: phoneInfo.appSystemVersion,
          deviceModel: 'N/A',
          deviceId: 'N/A',
          appVersion: 'N/A',
          appSystem: phoneInfo.appSystem
        }
      }
      // const phone = this.$encrypt('8888888888')
      login(params).then(res => {
        setLocalStore('refactor-misc-token', res.token)
        location.href = 'home.html'
      })
    }
  }
}
</script> -->

<style lang="less" scoped>
.field {
  margin: 60px 0 20px 0;
}
</style>
<script setup lang="ts">
import { getSmsChannels, login, sendVerifCode } from '@/api/login'
import { checkPlatform } from '@/utils/helper'
import { setLocalStore } from '@/config/global'
import { Form, Field, Button } from "vant";

// getSmsChannels()

</script>

